<template>
  <div class="index-container">
    <!-- 导航区域 -->
    <div class="nav">
      <ul>
        <li>
          <router-link to="/discovery">
            <span class="iconfont icon-find-music"></span>
            发现音乐
          </router-link>
        </li>
        <li>
          <router-link to="/playlists">
            <span class="iconfont icon-music-list"></span>
            推荐歌单
          </router-link>
        </li>
        <li>
          <router-link to="/songs">
            <span class="iconfont icon-music"></span>
            最新音乐
          </router-link>
        </li>
        <li>
          <router-link to="/mvs">
            <span class="iconfont icon-mv"></span>
            最新MV
          </router-link>
        </li>
      </ul>
    </div>
    <!-- 主体区域 -->
    <div class="main">
      <router-view></router-view>
    </div>
    <aplayer :audio="playList" :lrcType="1" ref="aplayer" fixed />
  </div>
</template>

<script>
import { getMusicUrl, getMusicLyc } from '@/request/api.js'
import store from '../store'
import { mapState, mapGetters } from 'vuex'
export default {
  name: 'index',

  mounted() {
    //订阅消息
    this.$pubSub.subscribe('AudioUpdate', (msg, item) => {
      this.updateAplayer(msg, item)
    })
    this.$pubSub.subscribe('AudioUpdateFromItem', (msg, item) => {
      this.updateAplayer(msg, item)
    })
    this.$pubSub.subscribe('AudioUpdateFromList', (msg, item) => {
      this.updateAplayerFromList(msg, item)
    })
    this.$pubSub.subscribe('AudioUpdateFromNewSongsList', (msg, item) => {
      this.updateAplayerFromList(msg, item)
    })
    // 来自mv,暂停音乐
    this.$pubSub.subscribe('AudioPause', () => {
      this.$refs.aplayer.pause()
    })
  },
  computed: {
    ...mapState(['playList'])
  },
  methods: {
    async updateAplayer(msg, item) {
      var obj = {}
      // 获取信息
      obj.name = item.name
      // 获取歌曲播放地址
      const { data: MusicUrl } = await getMusicUrl(item.id)
      if (!MusicUrl[0].url) {
        return this.$message.error('该资源为VIP专享，暂不支持播放 ！')
      }
      obj.url = MusicUrl[0].url
      // 获取歌词
      const { lrc } = await getMusicLyc(item.id)
      obj.lrc = lrc.lyric || ''

      if (msg === 'AudioUpdate') {
        obj.cover = item.picUrl
        obj.artist = item.song.artists[0].name
      } else {
        obj.cover = item.artists[0].img1v1Url
        obj.artist = item.artists[0].name
      }
      obj.theme = this.randomColor()
      store.commit('pushMusic', obj)
      this.$refs.aplayer.switch(obj.name)
      this.$refs.aplayer.play()
    },
    async updateAplayerFromList(msg, item) {
      var obj = {}
      // 获取信息
      obj.name = item.name
      // 获取歌曲播放地址
      const { data: MusicUrl } = await getMusicUrl(item.id)
      if (!MusicUrl[0].url) {
        return this.$message.error('该资源为VIP专享，暂不支持播放 ！')
      }
      obj.url = MusicUrl[0].url
      // 获取歌词
      const { lrc } = await getMusicLyc(item.id)
      obj.lrc = lrc.lyric || ''

      if (msg === 'AudioUpdateFromList') {
        obj.cover = item.al.picUrl
        obj.artist = item.ar[0].name
      } else {
        obj.cover = item.album.blurPicUrl
        obj.artist = item.name
      }
      obj.theme = this.randomColor()
      store.commit('pushMusic', obj)
      this.$refs.aplayer.switch(obj.name)
      this.$refs.aplayer.play()
    },
    randomColor() {
      return `#${((Math.random() * 0xffffff) << 0).toString(16)}`
    }
  }
}
</script>

<style lang="less" scoped>
.aplayer {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 500px;
  max-width: 500px;
}
#app .index-container .aplayer.aplayer-fixed .aplayer-body {
  max-width: 500px;
}
</style>
